<template>
    <section>
        <el-table v-loading="loading" ref="realTimeAlarmTable" :data="realTimeAlarmTableData"
            style="width: 100% ; margin-bottom: 10px;">
            <el-table-column prop="alarmId" label="告警id" width="200" align="center" />
            <el-table-column prop="alarmTitle" label="告警标题" width="200" align="center" />
            <el-table-column prop="eventTime" label="发生时间" width="200" align="center" :formatter="dateTimeFormatter" />
            <el-table-column prop="alarmStatus" label="告警状态" width="100" align="center">
                <template #default="scope">
                    <el-tag type='danger' disable-transitions>{{
                        "未清除" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="alarmLevel" label="告警等级" width="100" align="center">
                <template #default="scope">
                    <el-tag :type="fnalarmLevel(scope.row.alarmLevel)" disable-transitions>{{
                        scope.row.alarmLevel }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="equipmentManufacturerName" label="厂商名称" width="200" align="center" />
            <el-table-column prop="neName" label="网元名称" width="200" align="center" />
            <el-table-column prop="standardId" label="标准告警号" width="200" align="center" />
        </el-table>
        <el-pagination v-model:current-page="realCurrentPage" v-model:page-size="realPageSize"
            :page-sizes="[10, 50, 100, 200]" small="small" layout="total, sizes, prev, pager, next" :total="realTotal"
            @size-change="getRealTimeAlarmList" @current-change="getRealTimeAlarmList" />
    </section>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue'
import { queryCellRealTimeAlarmList } from '@/api/biz/networkAlarm'

const realTimeAlarmTableData = ref([])
const realCurrentPage = ref(0)
const realTotal = ref(0)
const realPageSize = ref(10)

const props = defineProps({
    baseData: {
        type: Object,
        default: () => { },
    }
})

const getPopupData = () => {
    console.log('故障告警信息', props.baseData)
}

function dateTimeFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return formattedDateTimeString;
}

function fnalarmLevel(levelNum) {
    if (levelNum === 1) {
        return "danger";
    } else if (levelNum === 2) {
        return "warning";
    } else if (levelNum === 3) {
        return "primary";
    } else if (levelNum === 4) {
        return "success";
    }
}

function getRealTimeAlarmList() {
    const { cgi, networkType } = props.baseData;
    let type = ""
    if (networkType == "5g") {
        type = "5G"
    } else if (networkType == "4g") {
        type = "4G"
    }
    let param = {
        cgi: cgi,
        networkType: type,
        pageSize: realPageSize.value,
        pageNum: realCurrentPage.value
    }
    queryCellRealTimeAlarmList(param).then(res => {
        realTimeAlarmTableData.value = res.rows;
        realTotal.value = res.total;
    })

}
getRealTimeAlarmList()


defineExpose({
    getPopupData,
});
</script>

<style lang="scss" scoped></style>